<template>
	<div class="iot-firm-detail">
		<div class="firm-info">
			<h3><i class="iconfont icon-info"></i> 企业信息</h3>
			<el-row class="basic-info" :gutter="20">
				<el-col :span="9">单位名称：{{businessDetail.name || '--'}}</el-col>
				<el-col :span="15">单位地址：{{businessDetail.addr || '--'}}</el-col>
				<el-col :span="9">消防负责人：{{businessDetail.safeResponPersonName || '--'}}</el-col>
				<el-col :span="15">联系电话：{{businessDetail.safeResponPersonPhone || '--'}}</el-col>
			</el-row>
		</div>
		<el-row class="mt-20 sum-blk" :gutter="20*scale">
			<el-col :span="7">
				<div class="firm-info sum-warn">
					<h3><i class="iconfont icon-warn"></i> 报警信息</h3>
					<div class="info-num">
						<b class="fm-num">{{iotData.todayAlarmCount || '--'}}</b>
						<p>今日报警数</p>
					</div>
				</div>
			</el-col>
			<el-col :span="17">
				<div class="firm-info sum-device">
					<h3><i class="iconfont icon-device"></i> 设备信息</h3>
					<div class="firm-nums flex wrap">
						<div class="info-num flex-1">
							<b class="fm-num">{{iotData.alarmCount || '--'}}</b>
							<p>设备总数</p>
						</div>
						<div class="info-num flex-1">
							<b class="fm-num">{{iotData.normalCount || '--'}}</b>
							<p>正常设备</p>
						</div>
						<div class="info-num flex-1">
							<b class="fm-num">{{iotData.todayAlarmCount || '--'}}</b>
							<p>报警设备</p>
						</div>
						<div class="info-num flex-1">
							<b class="fm-num">{{iotData.offLineCount || '--'}}</b>
							<p>离线设备</p>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<div class="iot-firm-nav mt-20">
			<a href="javascript:;" :class="{active: activeNavIndex == index}" v-for="(item,index) in navs" :key="index" @click="changeNav(item, index)">{{item.name}}</a>
		</div>
		<el-row class="divid-blk mt-10" :gutter="20*scale">
			<el-col :span="7">
				<div class="firm-info">
					<h3><i class="iconfont icon-warn"></i> 设备信息</h3>
					<div class="firm-nums flex wrap">
						<div class="info-num">
							<b class="fm-num">{{dividData.allCount || '--'}}</b>
							<p>设备总数</p>
						</div>
						<div class="info-num">
							<b class="fm-num">{{dividData.normalCount || '--'}}</b>
							<p>正常设备</p>
						</div>
						<div class="info-num">
							<b class="fm-num">{{dividData.alarmCount || '--'}}</b>
							<p>报警设备</p>
						</div>
						<div class="info-num">
							<b class="fm-num">{{dividData.offLineCount || '--'}}</b>
							<p>离线设备</p>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :span="17">
				<div class="firm-info">
					<h3><i class="iconfont icon-device"></i> 一周报警</h3>
					<div id="firmWeekChart" class="firm-chart"></div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import HighCharts from 'highcharts'
import { mapState } from 'vuex'
export default {
	name: 'FirmDetail',
	props: {
		id: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'fireControl'
		}
	},
	computed: {
		...mapState([
			'scale'
		]),
	},
	watch: {
		scale () {
			this.renderChart()
		},
		id(val){
			this.chartData = null
			this.iotData = {}
        	this.businessDetail = {}
        	this.dataObj = {}
        	this.dividData = {}
			this.getData()
		}
	},
	data () {
		return {
			loading: false,
			chartData: null,
			iotData:{},
			businessDetail:{},
			dataObj:{},
			dividData: {},
			activeNavIndex: 0,
			navs: [{
				type: 'electricFire',
				name: '电气火灾设备'
			},{
				type: 'water',
				name: '消防水设备'
			},{
				type: 'smoke',
				name: '烟感设备'
			},{
				type: 'combustibleGas',
				name: '可燃气体设备'
			},{
				type: 'fireFightingVisualization',
				name: '消防可视化设备'
			}]
		}
	},
	methods: {
		getData(){
			let url = '/fireFightingIOT/fireFightingIOT/getBusinessDetail'
			this.$get(url, {
            	id: this.id
            }).then(res => {
            	this.loading = false
            	this.iotData = res.data.iotData
            	this.businessDetail = res.data.businessDetail
            	this.dataObj = res.data
            	this.setDividData('electricFire')
            }, (err) =>{
            	// 
            })
		},
		changeNav (item, index) {
			this.activeNavIndex = index
			this.setDividData(item.type)
		},
		setDividData (type) {
			this.dividData = this.dataObj[type+'Data']
			this.setChartData(type)
		},
		setChartData (type) {
			let weekData = this.dividData.weekAlarmList
			let categories = weekData.map((item)=> item.date)
			let series = []
			if(type=='electricFire'){
				series = [{
			        name: '电流报警',
			        data: weekData.map((item)=> {
			        	return item.weekCurrentCount
			        })
			    }, {
			        name: '温度报警',
			        data: weekData.map((item)=> item.weekTemperatureCount)
			    }, {
			        name: '漏电流报警',
			        data: weekData.map((item)=> item.weekLeakageCurrentCount)
			    }, {
			        name: '电压报警',
			        data: weekData.map((item)=> item.weekVoltageCount)
			    }]
			}
			if(type=='fireFightingVisualization'){
				series = [{
			        name: '火焰报警',
			        data: weekData.map((item)=> item.weekFireCount)
			    }, {
			        name: '消防通道',
			        data: weekData.map((item)=> item.weekPassWayCount)
			    }, {
			        name: '脱岗离岗',
			        data: weekData.map((item)=> item.weekLeaveCount)
			    }]
			}
			if(type=='water'){
				series = [{
			        name: '液位报警',
			        data: weekData.map((item)=> item.weekLevelCount)
			    }, {
			        name: '液压报警',
			        data: weekData.map((item)=> item.weekHydraulicPressureCount)
			    }]
			}
			if(type=='combustibleGas'){
				series = [{
			        name: '报警数量',
			        data: weekData.map((item)=> item.weekGasCount)
			    }]
			}
			if(type=='smoke'){
				series = [{
			        name: '烟雾报警',
			        data: weekData.map((item)=> item.weekSmokeCount)
			    }, {
			        name: '信号异常',
			        data: weekData.map((item)=> item.weekSignalCount)
			    }]
			}
			
			this.chartData = {
				categories: categories,
				series: series
			}
			this.renderChart()
		},
		renderChart () {
			if(!this.chartData) return
			let that = this
			let width = this.scale*520
			let height = this.scale*220
			let data = this.chartData
			let options = {
				credits:{
					enabled: false
				},
				colors: ['#5AD8A6', '#F6BD16','#5B8FF9','#9270CA'],
				chart: {
			        type: 'spline',
			        width:width,
			        height:height,
					backgroundColor:'transparent',
					spacing: 0,
					margin: [50 * this.scale, 0, 30, 40 * this.scale]
			    },
			    title: {
			        text: ''
			    },
			    xAxis: {
			        categories: data.categories,
			        title: {
						text: null
					},
					labels: {
						style: {
							color: "#AFECFF",
							fontSize: 12 * this.scale
						}
					},
					lineColor: '#85b4d0',
			    },
			    yAxis: {
			        title: {
			            text: null
			        },
					labels: {
						style: {
							color: "#AFECFF",
							fontSize: 12 * this.scale
						},
					},
					minorGridLineWidth: 0,
					lineWidth: 0,
					tickWidth: 0,
					tickPosition: 'inside',
					tickmarkPlacement: 'between',
					tickColor: '#AFECFF',
					gridLineWidth: 1,
					gridLineColor: '#57789a',
					tickInterval:10
			    },
				legend: {
					enabled: true,
					align: 'right',
					float: true,
					verticalAlign: 'top',
					itemStyle:{
						color:"#AFECFF",
						fontSize:12*this.scale+'px'
					},
					itemHoverStyle: {
						color:"#ffffff"
					},
					itemMarginBottom: 5*this.scale,
					squareSymbol: false,
					// symbolWidth: 24*this.scale,
					// symbolHeight: 2*this.scale,
					// symbolPadding: 5*this.scale,
					// symbolRadius: 2*this.scale,
					lineHeight: 0,
					// width: '60%'
				},
			    tooltip: {
			        shared: true
			    },
			    plotOptions: {
			        areaspline: {
                		dataLabels:{
                            enabled:false, // dataLabels设为true
                            style:{
                                color:'#fff',
                                fonstSize: 12
                            }
                        },
				        marker: {
				        	enabled: true,
				        	radius: 4*this.scale,
		            		lineWidth:1
				        }
			        },
			    },
			    series: data.series
			}
			HighCharts.chart('firmWeekChart',options)
		},
	},
	created () {
		// console.log('FirmDetail.vue created')
		this.getData()
	},
	mounted () {
		// console.log('mounted')
	},
	destroyed () {
		// console.log('destroyed')
	}
}
</script>